<template>
  <div style="text-align: center">
    <el-form :inline="true" :model="search">
      <el-form-item>
        <el-input
          v-model="search.name"
          style="width: 500px"
          placeholder="请输入要搜索的奶茶名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          style="background-color: orange; color: white"
          @click="getTableData"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div style="border: 2px solid orange; width: 75%; margin: 0px auto">
      <el-breadcrumb separator=" ">
        <el-breadcrumb-item>
          <el-button
            style="
              color: orange;
              font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman',
                serif;
              border: none;
            "
            @click="choose(0)"
            >全部</el-button
          ></el-breadcrumb-item
        >
        <el-breadcrumb-item v-for="(item, index) in types" :key="index">
          <el-button
            style="
              color: orange;
              font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman',
                serif;
              border: none;
            "
            @click="choose(item.GTID)"
            >{{ item.Name }}</el-button
          ></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <table>
      <tr>
        <td type="border-card" v-for="(item, index) in tableData" :key="index">
          <el-card class="box-card">
            <el-popover
              placement="top-start"
              title="奶茶描述"
              width="200"
              trigger="hover"
              :content="item.Content"
            >
              <el-image
                slot="reference"
                :src="imgbase + item.Images"
                style="margin-top: 30px; width: 70%; height: 160px"
              ></el-image>
            </el-popover>
            <br />
            <label
              style="
                font-family: 'Times New Roman', Times, serif;
                color: orange;
              "
              >{{ item.Name }}</label
            >
            <br />
            <label
              style="
                font-family: 'Times New Roman', Times, serif;
                color: orange;
              "
              >￥{{ item.Price }}</label
            >
            <br />
            <el-button
              @click="milkteadetail(item)"
              style="margin-top: 10px; background-color: orange; color: white"
              icon="el-icon-shopping-cart-2"
              circle
            ></el-button>
          </el-card>
        </td>
      </tr>
    </table>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :hide-on-single-page="autoHide"
      :page-sizes="[12, 24, 36, 48]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum"
      background
      style="margin-top: 80px"
    >
    </el-pagination>

    <el-dialog
      title=""
      append-to-body
      :visible.sync="detailDialogVisible"
      width="500px"
    >
      <detail :dialogVisible.sync="detailDialogVisible" :data="good"></detail>
    </el-dialog>
  </div>
</template>

<script>
import basepath from "../../plugins/base.js";
import detail from "./detail.vue";

export default {
  name: "control",
  data() {
    return {
      loading: false,
      pageIndex: 1,
      pageSize: 12,
      totalNum: 0,
      autoHide: false,
      tableData: [],
      good: {},
      types: [],
      gtid: 0,
      imgbase: "",
      search: {
        name: "",
      },
      detailDialogVisible: false,
    };
  },
  methods: {
    getTableData() {
      this.loading = true;
      this.axios({
        method: "get",
        url: "goods/pagetwo",
        params: {
          page: this.pageIndex,
          limit: this.pageSize,
          name: this.search.name,
          gtid: this.gtid,
        },
        data: {},
      }).then((res) => {
        console.log("res: ", res);

        this.tableData = res.data.data;
        this.totalNum = res.data.count;
        setTimeout(() => {
          this.loading = false;
        }, 200);
      });
    },
    milkteadetail(value) {
      this.good = value;
      this.detailDialogVisible = true;
    },
    choose(value) {
      this.gtid = value;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getTableData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
  },
  created() {
    this.axios({
      method: "get",
      url: "GoodsType",
    }).then((res) => {
      console.log("res: ", res);
      this.types = res.data.data;
    });
    this.imgbase = basepath.imgUrl;
    this.getTableData();
  },
  components: {
    detail,
  },
};
</script>

<style scoped>
table {
  width: 90%;
  border-collapse: collapse;
  margin: 0px auto;
}
tr {
  display: flex;
  flex-wrap: wrap;
}
td {
  width: 18%;
  height: 300px;
  margin-right: 6%;
  margin-top: 40px;
}
</style>